import {
  AlipayOutlined,
  LockOutlined,
  MobileOutlined,
  TaobaoOutlined,
  UserOutlined,
  WeiboOutlined,
  SafetyOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  LoginForm,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components';
import {
  Button,
  Divider,
  message,
  Space,
  Tabs,
  Form,
  Row,
  Col,
  Input,
} from 'antd';
import { useModel, useNavigate } from '@umijs/max';
import { useState, useRef, useEffect } from 'react';
import { login } from '@/services/api/login';
// type LoginType = 'phone' | 'account';

export default () => {
  const formRef = useRef();
  let navigate = useNavigate();
  const { initialState, loading, error, refresh, setInitialState } =
    useModel('@@initialState');
  //   const { setUser } = useModel('global');

  const onFinish = async (values) => {
    // navigate('/home');
    try {
      // 登录
      const msg = await login({ data: { ...values } });
      if (msg.code === 0) {
        const defaultLoginSuccessMessage = '登录成功！';
        message.success(defaultLoginSuccessMessage);

        setInitialState({ currentUser: msg.data?.user });
        const urlParams = new URL(window.location.href).searchParams;
        navigate(urlParams.get('redirect') || '/');
        // navigate( '/messageRecord');
        return;
      } else {
        // message.error(msg.msg);
      }

      // 如果失败去设置用户错误信息
      // setUserLoginState(msg);
    } catch (error) {
      const defaultLoginFailureMessage = '登录失败，请重试！';
      console.log(error);
      // message.error(defaultLoginFailureMessage);
    }
  };

  return (
    <div style={{ backgroundColor: 'white', paddingTop: 100 }}>
      <LoginForm
        // logo="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
        title="短信服务"
        // subTitle=" "
        style={{ marginTop: 40 }}
        formRef={formRef}
        onFinish={onFinish}
      >
        <>
          <ProFormText
            name="username"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined className={'prefixIcon'} />,
            }}
            allowClear={false}
            placeholder={'用户名'}
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={'prefixIcon'} />,
            }}
            placeholder={'密码'}
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          />
        </>
      </LoginForm>
    </div>
  );
};
